<template>
  <div class="bac">
    <!-- <header-tab>
      <span slot="left" @click="Go_back"><van-icon name="arrow-left" /></span>
      <span slot="right" @click="Go_login">登录</span>
    </header-tab> -->

    <!-- 版心 -->
    <div class="container">
      <div class="zdy-nav">
        <span class="zdy-back"></span>
        <span class="zdy-login"
          ><router-link to="/login">登录</router-link>
        </span>
      </div>
      <!-- 注册表单 -->

      <van-cell-group>
        <h1 class="zhuce-font">注册</h1>
        <!-- 邮箱 -->
        <van-field
          left-icon="/img/icon/my.png"
          placeholder="请输入用户名"
          v-model="name"
          clearable
          @mouseleave="checkName"
        />
        <span class="yz-null yz-span" v-if="nameErr">用户名不能为空</span>
        <van-field
          left-icon="/img/icon/email.png"
          placeholder="请输入邮箱"
          v-model="email"
          clearable
          @mouseleave="checkEmail"
        />
        <span class="yz-email yz-span" v-if="emailErr">邮箱格式错误</span
        ><span class="yz-email yz-span" v-if="emailDb">邮箱已被注册</span>

        <!-- 验证码 -->
        <van-field
          v-model="code"
          center
          clearable
          left-icon="/img/icon/yzm.png"
          placeholder="请输入验证码"
          @mouseleave="checkCode"
        >
          <template #button>
            <van-button size="small" type="primary" @click="getCode"
              >发送验证码</van-button
            >
          </template>
        </van-field>
        <span class="yz-code yz-span" v-if="codeErr">验证码错误</span>

        <!-- 密码 -->
        <van-field
          v-model="pwd"
          clearable
          type="password"
          left-icon="/img/icon/pwd.png"
          placeholder="请设置密码"
          @mouseleave="checkPwd"
        />

        <span class="yz-pwd yz-span" v-if="pwdErr">字母开头6~18位之间 </span>

        <p style="padding-left: 2rem; margin-bottom: 2rem">收不到验证码?</p>
        <van-button
          type="primary"
          block
          style="border-radius: 30px"
          native-type="submit"
          @click="goRegister"
          >免费注册</van-button
        >
      </van-cell-group>

      <!-- 底部 -->
      <div class="zdy-bottom">
        <!-- 分割线 -->
        <van-divider style="margin: 1rem 0">其他登录方式</van-divider>
        <van-grid
          :border="false"
          direction="horizontal"
          :column-num="3"
          icon-size="3rem"
        >
          <van-grid-item icon="/img/icon/qq.png" />
          <van-grid-item icon="/img/icon/weibo.png" />
          <van-grid-item icon="/img/icon/chat.png" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTab from "@/components/HeaderTab.vue";
export default {
  components: { HeaderTab },
  data() {
    return {
      name: "",
      nameErr: false,
      email: "",
      emailErr: false,
      emailDb: false,
      code: "",
      codeErr: false,
      pwd: "",
      pwdErr: false,
    };
  },
  methods: {
    Go_back() {
      this.$router.push({ path: "/Index" });
    },
    Go_login() {
      this.$router.push({ path: "/login" });
    },
    //验证用户名不能为空
    checkName() {
      if (this.name == "") {
        return (this.nameErr = true);
      } else {
        return (this.nameErr = false);
      }
    },
    //验证邮箱格式是否正确
    checkEmail() {
      if (this.email == "") {
        return (this.emailErr = true);
      }
      let exp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (exp.test(this.email)) {
        // 成功
        this.emailErr = false;
      } else {
        // 失败
        this.emailErr = true;
      }
      // let params = `uEmail=${this.email}`;
      // this.axios.post("/user/checkEmail", params).then((res) => {
      //   console.log("checkEmail", res);
      //   if (res.data.code === "201") {
      //     this.emailDb = true;
      //   } else {
      //     this.emailDb = false;
      //   }
      // });
    },

    //获取验证码
    getCode() {
      let params = `uEmail=${this.email}`;
      this.axios.post("/user/getCode", params).then((res) => {
        console.log("getcode", res);
      });
    },
    //验证 验证吗
    checkCode() {
      let params = `uEmail=${this.email}&&code=${this.code}`;
      this.axios.post("/user/checkcode", params).then((res) => {
        console.log("checkcode", res);
        if (res.data.code === "200") {
          this.codeErr = false;
        } else {
          this.codeErr = true;
        }
      });
    },
    //验证密码格式
    checkPwd() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.pwd)) {
        // 成功
        this.pwdErr = false;
      } else {
        // 失败
        this.pwdErr = true;
      }
    },
    //注册
    goRegister() {
      if (
        this.nameErr ||
        this.emaillErr ||
        this.emailDb ||
        this.pwdErr ||
        this.name == "" ||
        this.email == "" ||
        this.code == "" ||
        this.pwd == ""
      ) {
        this.$toast("请输入正确信息");
        return;
      }
      if (
        this.nameErr == false ||
        this.emaillErr == false ||
        this.emailDb == false ||
        this.pwdErr == false
      ) {
        let params = `uName=${this.name}&&uEmail=${this.email}&&uPwd=${this.pwd}`;
        this.axios.post("/user/register", params).then((res) => {
          console.log("注册状态", res);
          if (res.data.code == 200) {
            this.$toast("注册成功");
            this.$router.push("/login");
          } else {
            this.$toast("注册失败");
          }
        });
      }
      // else {
      //   let params = `uName=${this.name}&&uEmail=${this.email}&&uPwd=${this.pwd}`;
      //   this.axios.post("/user/register", params).then((res) => {
      //     console.log("注册状态", res);
      //   });
      // }
    },
  },
};
</script>

<style lang="scss">
.bac {
  display: flex;
  height: 100vh;
  background: url("/public/img/background/reg_bg.jpg");
  background-color: #f7f7f7;
  background-size: 100vw 24rem;
  background-repeat: no-repeat;
}
.van-cell-group {
  border-radius: 1rem;
  border: none;
  padding: 4rem;
  margin-top: 6rem;
  clear: both;
}
.zdy-bottom {
  background: #f7f7f7;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}

.van-button--primary {
  background-color: #fecb1c;
  border: none;
}
.van-field__control,
.van-field__error-message {
  padding-left: 3rem;
}
.van-cell {
  display: flex;
  align-items: center;
}
.container {
  width: 34rem;
  margin: 1rem auto;
}
.zhuce-font {
  color: #fecb1c;
  text-align: center;
  margin: 0;
  padding: 0;
  // margin-top: -2rem;
  margin-bottom: 2rem;
}
.van-button--info {
  background-color: #fecb1c;
}

.van-grid-item__content {
  background-color: #f7f7f7;
}
.zdy-nav {
  a:link {
    color: #fecb1c;
  }
  a:visited {
    color: #fecb1c;
  }
  a:hover {
    color: #fecb1c;
  }
  a:active {
    color: #fecb1c;
  }
  display: flex;
  justify-content: space-between;
  color: #fecb1c;
  font-size: 1.6rem;
  .zdy-login {
    background-color: white;
    width: 5rem;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1rem;
  }
  span:first-child {
    width: 3rem;
    height: 3rem;
    img {
      width: 3rem;
      height: 3rem;
    }
  }
}
.yz-span {
  display: block;
  // display: none;
  color: red;
  text-align: center;
}
</style>